<template>
  <div class="home">
    <el-form :model="area" label-width="80px" v-loading="loading">
      <el-form-item label="名称">
        <el-input v-model="area.areaName"></el-input>
      </el-form-item>
      <el-form-item label="点位描述">
        <el-input
          v-model="area.description"
          :rows="5"
          type="textarea"
        ></el-input>
      </el-form-item>
      <el-form-item label="手绘图">
        <div
          v-for="(item, index) in layer"
          :key="index"
          @click="changeLayer(item)"
        >
          <el-image
            style="width: 100px; height: 100px"
            :src="item.imgUrl"
          ></el-image>
        </div>
        <div @click="addLayer()">
          <el-icon class="icon-image-icon"><Plus /></el-icon>
        </div>
      </el-form-item>
      <el-form-item label="经纬度">
        <el-input disabled v-model="area.longitude"></el-input>
        <el-input disabled v-model="area.latitude"></el-input>
        <SelectLocation
          style="width: 700px; height: 400px"
          :center="center"
          :selectedPosition="selectedPosition"
          @mapClick="handleSelectLocation"
        ></SelectLocation>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSaveClick">保存</el-button>
      </el-form-item>
    </el-form>

    <el-dialog v-model="layerDialogVisible" title="Tips" width="800">
      <span>选择图标</span>
      <template #footer>
        <div class="dialog-footer">
          <Icon @select-icon="selectIcon" />
        </div>
      </template>
    </el-dialog>
  </div>
</template>
      
  <script setup>
import { Plus, CircleCheck } from "@element-plus/icons-vue";
import { onMounted, reactive, toRefs } from "vue";
import Icon from "@/components/Icon.vue";
import SelectLocation from "@/components/SelectLocation.vue";
import http from "@/utils/http";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
const router = useRouter();

// 组件列表
const components = { Icon, SelectLocation };

const Data = reactive({
  area: {},
  layerDialogVisible: false,
  layer: [],
  loading: true,
  selectedPosition: {},
  center: { lat: 28.674993, lng: 121.4077192 },
  selectedLayer: {},
});
const {
  area,
  selectedLayer,
  layerDialogVisible,
  layer,
  loading,
  selectedPosition,
  center,
} = toRefs(Data);
onMounted(() => {
  if (router.currentRoute.value.query.areaId) {
    if (router.currentRoute.value.query.areaId == 0) {
      Data.area.id = null;
      Data.loading = false;
    } else {
      Data.area.id = router.currentRoute.value.query.areaId;
      http
        .get(
          "/area/ua/getAreaById?id=" + router.currentRoute.value.query.areaId
        )
        .then((res) => {
          Data.area = res.data;
          Data.area.status = res.data.status + "";
          Data.selectedPosition = {
            lat: res.data.latitude,
            lng: res.data.longitude,
          };
          Data.center = {
            lat: res.data.latitude,
            lng: res.data.longitude,
          };
          Data.loading = false;
        });
    }
  }
  initLayer();
});
const initLayer = () => {
  http.get("/area/ua/listLayerByAreaId?areaId=" + Data.area.id).then((res) => {
    Data.layer = res.data;
  });
};
const selectIcon = (item) => {
  console.log(item);
  Data.selectedLayer.imgUrl = item.filePath;
  if (!Data.selectedLayer.id) {
    Data.selectedLayer.latitude = Data.area.latitude;
    Data.selectedLayer.longitude = Data.area.longitude;
    http.post("/area/addLayer", Data.selectedLayer).then((res) => {
      if (res.code === "0000") {
        ElMessage.success(res.message);
        Data.layerDialogVisible = false;
        initLayer();
      } else {
        ElMessage.error(res.message);
      }
    });
  } else {
    http.post("/area/updateLayer", Data.selectedLayer).then((res) => {
      if (res.code === "0000") {
        ElMessage.success(res.message);
        Data.layerDialogVisible = false;
        initLayer();
      } else {
        ElMessage.error(res.message);
      }
    });
  }
};
const handleSaveClick = () => {
  console.log(Data.area);
  if (!Data.area.id) {
    addarea();
  } else {
    updatearea();
  }
};
const addarea = () => {
  http.post("/area/addarea", Data.area).then((res) => {
    if (res.code === "0000") {
      ElMessage.success(res.message);
      router.go(-1);
    } else {
      ElMessage.error(res.message);
    }
  });
};
const updatearea = () => {
  http.post("/area/updateArea", Data.area).then((res) => {
    if (res.code === "0000") {
      ElMessage.success(res.message);
      router.go(-1);
    } else {
      ElMessage.error(res.message);
    }
  });
};
const changeLayer = (item) => {
  router.push({
    path: "/home/layerManagement",
    query: { layerId: item.id },
  });
};
const addLayer = () => {
  Data.selectedLayer.id = null;
  Data.selectedLayer.areaId = Data.area.id;
  Data.layerDialogVisible = true;
};
const handleSelectLocation = (item) => {
  console.log(item);
  Data.area.latitude = item.latLng.lat;
  Data.area.longitude = item.latLng.lng;
};
</script>
      
  <style scoped>
.home {
  padding: 20px;
}
</style>
  
      